<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>权限管理系统 - Mybatis + Servlet</title>
    <base href="${pageContext.request.contextPath}/">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
    <header>
        <h1>权限管理系统</h1>
        <p>基于Mybatis的多表联合查询实践</p>
        <nav>
            <a href="${pageContext.request.contextPath}/pages/user-list.jsp">用户管理</a>
            <a href="${pageContext.request.contextPath}/pages/role-list.jsp">角色管理</a>
        </nav>
    </header>

    <div class="content">
        <!-- 系统介绍 -->
        <div class="intro-section">
            <h2>系统功能</h2>
            <div class="features">
                <div class="feature-card">
                    <h3>用户查询</h3>
                    <p>查询用户信息及其拥有的所有角色</p>
                    <a href="${pageContext.request.contextPath}/pages/user-list.jsp" class="btn-primary">进入用户管理</a>
                </div>
                <div class="feature-card">
                    <h3>角色管理</h3>
                    <p>查询角色信息及其菜单权限</p>
                    <a href="${pageContext.request.contextPath}/pages/role-list.jsp" class="btn-primary">进入角色管理</a>
                </div>
                <div class="feature-card">
                    <h3>条件搜索</h3>
                    <p>根据条件搜索用户及其权限信息</p>
                    <a href="${pageContext.request.contextPath}/pages/user-list.jsp" class="btn-primary">开始搜索</a>
                </div>
            </div>
        </div>

        <!-- 快速操作 -->
        <div class="quick-actions">
            <h2>快速操作</h2>
            <div class="action-buttons">
                <button onclick="quickSearchUser('admin')" class="btn-primary">
                    <span class="btn-icon">👑</span>
                    查询管理员
                </button>
                <button onclick="quickSearchUser('jack')" class="btn-primary">
                    <span class="btn-icon">👤</span>
                    查询Jack用户
                </button>
                <button onclick="quickViewRole(1)" class="btn-primary">
                    <span class="btn-icon">🔧</span>
                    查看管理员角色
                </button>
                <button onclick="quickViewRole(2)" class="btn-primary">
                    <span class="btn-icon">👥</span>
                    查看客户角色
                </button>
            </div>
        </div>

        <!-- 统计信息 -->
        <div class="stats-section">
            <h2>数据统计</h2>
            <div class="stats-cards">
                <div class="stat-card">
                    <h3>用户总数</h3>
                    <div class="stat-number">6</div>
                </div>
                <div class="stat-card">
                    <h3>角色数量</h3>
                    <div class="stat-number">3</div>
                </div>
                <div class="stat-card">
                    <h3>菜单数量</h3>
                    <div class="stat-number">9</div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function quickSearchUser(username) {
        window.location.href = '${pageContext.request.contextPath}/pages/user-list.jsp?quickUsername=' + username;
    }

    function quickViewRole(roleId) {
        window.location.href = '${pageContext.request.contextPath}/pages/role-list.jsp?quickRoleId=' + roleId;
    }
</script>
</body>
</html>